<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Subgraphs with Different Layout</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '0',
            label: '0',
          },
          {
            id: '1',
            label: '1',
          },
          {
            id: '2',
            label: '2',
          },
          {
            id: '3',
            label: '3',
          },
          {
            id: '4',
            label: '4',
          },
          {
            id: '5',
            label: '5',
          },
          {
            id: '6',
            label: '6',
          },
          {
            id: '7',
            label: '7',
          },
          {
            id: '8',
            label: '8',
          },
          {
            id: '9',
            label: '9',
          },
          {
            id: '10',
            label: '10',
          },
          {
            id: '11',
            label: '11',
          },
          {
            id: '12',
            label: '12',
          },
          {
            id: '13',
            label: '13',
          },
          {
            id: '14',
            label: '14',
          },
          {
            id: '15',
            label: '15',
          },
          {
            id: '16',
            label: '16',
          },
          {
            id: '17',
            label: '17',
          },
          {
            id: '18',
            label: '18',
          },
          {
            id: '19',
            label: '19',
          },
          {
            id: '20',
            label: '20',
          },
          {
            id: '21',
            label: '21',
          },
          {
            id: '22',
            label: '22',
          },
          {
            id: '23',
            label: '23',
          },
          {
            id: '24',
            label: '24',
          },
          {
            id: '25',
            label: '25',
          },
          {
            id: '26',
            label: '26',
          },
          {
            id: '27',
            label: '27',
          },
          {
            id: '28',
            label: '28',
          },
          {
            id: '29',
            label: '29',
          },
          {
            id: '30',
            label: '30',
          },
          {
            id: '31',
            label: '31',
          },
          {
            id: '32',
            label: '32',
          },
          {
            id: '33',
            label: '33',
          },
          {
            id: '34',
            label: '34',
          },
          {
            id: '35',
            label: '35',
          },
          {
            id: '36',
            label: '36',
          },
          {
            id: '37',
            label: '37',
          },
          {
            id: '38',
            label: '38',
          },
          {
            id: '39',
            label: '39',
          },
          {
            id: '40',
            label: '40',
          },
        ],
        edges: [
          {
            source: '0',
            target: '1',
          },
          {
            source: '0',
            target: '2',
          },
          {
            source: '0',
            target: '3',
          },
          {
            source: '0',
            target: '4',
          },
          {
            source: '0',
            target: '5',
          },
          {
            source: '0',
            target: '7',
          },
          {
            source: '0',
            target: '8',
          },
          {
            source: '0',
            target: '9',
          },
          {
            source: '0',
            target: '10',
          },
          {
            source: '0',
            target: '11',
          },
          {
            source: '0',
            target: '13',
          },
          {
            source: '0',
            target: '14',
          },
          {
            source: '0',
            target: '15',
          },
          {
            source: '0',
            target: '16',
          },
          {
            source: '2',
            target: '3',
          },
          {
            source: '4',
            target: '5',
          },
          {
            source: '4',
            target: '6',
          },
          {
            source: '5',
            target: '6',
          },
          {
            source: '7',
            target: '13',
          },
          {
            source: '8',
            target: '14',
          },
          {
            source: '9',
            target: '10',
          },
          {
            source: '10',
            target: '22',
          },
          {
            source: '10',
            target: '14',
          },
          {
            source: '10',
            target: '12',
          },
          {
            source: '10',
            target: '24',
          },
          {
            source: '10',
            target: '21',
          },
          {
            source: '10',
            target: '20',
          },
          {
            source: '11',
            target: '24',
          },
          {
            source: '11',
            target: '22',
          },
          {
            source: '11',
            target: '14',
          },
          {
            source: '12',
            target: '13',
          },
          {
            source: '16',
            target: '17',
          },
          {
            source: '16',
            target: '18',
          },
          {
            source: '16',
            target: '21',
          },
          {
            source: '16',
            target: '22',
          },
          {
            source: '17',
            target: '18',
          },
          {
            source: '17',
            target: '20',
          },
          {
            source: '18',
            target: '19',
          },
          {
            source: '19',
            target: '20',
          },
          {
            source: '19',
            target: '33',
          },
          {
            source: '19',
            target: '22',
          },
          {
            source: '19',
            target: '23',
          },
          {
            source: '20',
            target: '21',
          },
          {
            source: '21',
            target: '22',
          },
          {
            source: '22',
            target: '24',
          },
          {
            source: '22',
            target: '25',
          },
          {
            source: '22',
            target: '26',
          },
          {
            source: '22',
            target: '23',
          },
          {
            source: '22',
            target: '28',
          },
          {
            source: '22',
            target: '30',
          },
          {
            source: '22',
            target: '31',
          },
          {
            source: '22',
            target: '32',
          },
          {
            source: '22',
            target: '33',
          },
          {
            source: '23',
            target: '28',
          },
          {
            source: '23',
            target: '27',
          },
          {
            source: '23',
            target: '29',
          },
          {
            source: '23',
            target: '30',
          },
          {
            source: '23',
            target: '31',
          },
          {
            source: '23',
            target: '33',
          },
          {
            source: '32',
            target: '33',
          },
          {
            source: '10',
            target: '34',
          },
          {
            source: '34',
            target: '35',
          },
          {
            source: '35',
            target: '36',
          },
          {
            source: '36',
            target: '37',
          },
          {
            source: '37',
            target: '38',
          },
          {
            source: '38',
            target: '39',
          },
          {
            source: '39',
            target: '40',
          },
          {
            source: '40',
            target: '10',
          },
        ],
      };

      const nodes = data.nodes;
      const edges = data.edges;

      const group1Nodes = [];
      const group1NodeMap = new Map();
      const group2Nodes = [];
      const group2NodeMap = new Map();
      const group3Nodes = [];
      const group3NodeMap = new Map();

      nodes.forEach((node, i) => {
        if (!node.style) {
          if (i <= 16 && i !== 10) {
            node.style = { fill: 'lightsteelblue' };
            group1Nodes.push(node);
            group1NodeMap.set(node.id, i);
          } else if (i > 16 && i < 34) {
            node.style = { fill: 'lightgrey' };
            group2Nodes.push(node);
            group2NodeMap.set(node.id, i);
          } else {
            group3Nodes.push(node);
            group3NodeMap.set(node.id, i);
          }
        } else {
          if (i <= 16 && i !== 12) {
            node.style.fill = 'lightsteelblue';
            group1Nodes.push(node);
            group1NodeMap.set(node.id, i);
          } else if (i > 16) {
            node.style.fill = 'lightgrey';
            group2Nodes.push(node);
            group2NodeMap.set(node.id, i);
          }
        }
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        modes: {
          default: ['drag-node'],
        },
        defaultNode: {
          size: [20, 20],
          color: 'steelblue',
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
        },
      });
      graph.data(data);
      graph.render();

      let subForceLayout;
      setTimeout(() => {
        const group1Edges = [];
        const center = [700, 100];
        // fix the nodes[0]
        nodes[0].fx = center[0];
        nodes[0].fy = center[1];
        // add related edges
        edges.forEach(edge => {
          const sourceId = edge.source;
          const targetId = edge.target;
          if (
            group1NodeMap.get(sourceId) !== undefined &&
            group1NodeMap.get(targetId) !== undefined
          ) {
            group1Edges.push(edge);
          }
        });

        subForceLayout = new G6.Layout['force']({
          center,
          linkDistance: 70,
          preventOverlap: true,
          nodeSize: 20,
          tick() {
            // the tick function to show the animation of layout process
            graph.refreshPositions();
          },
        });
        subForceLayout.init({
          nodes: group1Nodes,
          edges: group1Edges,
        });
        subForceLayout.execute();
      }, 1000);

      setTimeout(() => {
        subForceLayout.forceSimulation && subForceLayout.forceSimulation.stop();
        const group2Edges = [];
        // add related edges
        edges.forEach(edge => {
          const sourceId = edge.source;
          const targetId = edge.target;
          if (
            group2NodeMap.get(sourceId) !== undefined &&
            group2NodeMap.get(targetId) !== undefined
          ) {
            group2Edges.push(edge);
          }
        });

        const subRadialLayout = new G6.Layout['radial']({
          focusNode: '22',
          center: [250, 150],
          preventOverlap: true,
          nodeSize: 20,
          unitRadius: 50,
        });
        subRadialLayout.init({
          nodes: group2Nodes,
          edges: group2Edges,
        });
        subRadialLayout.execute();
        graph.positionsAnimate();
      }, 2500);

      setTimeout(() => {
        const group3Edges = [];
        // add related edges
        edges.forEach(edge => {
          const sourceId = edge.source;
          const targetId = edge.target;
          if (
            group3NodeMap.get(sourceId) !== undefined &&
            group3NodeMap.get(targetId) !== undefined
          ) {
            group3Edges.push(edge);
          }
        });

        const subCircularLayout = new G6.Layout['circular']({
          center: [500, 450],
          radius: 100,
        });
        subCircularLayout.init({
          nodes: group3Nodes,
          edges: group3Edges,
        });
        subCircularLayout.execute();
        graph.positionsAnimate();
      }, 4000);
    </script>
  </body>
</html>
